<template>
  <div class="data-box">
    <div class="suffix-container">
      <div class="normal-wrap">
        <div class="normal-avatar">
          <div class="avatar-circle"><div class="avatar-img" :style="{ backgroundImage: 'url(' + headImgUrl + ')' }"></div></div>
        </div>
        <div class="normal-title">{{ nickname }}</div>
      </div>
    </div>

    <div id="myChart1" class="myChart1"></div>
    <div id="myChart2" class="myChart2"></div>
    <div id="myChart3" class="myChart1"></div>
  </div>
</template>

<script>
import echarts from 'echarts';
import $ from 'jquery';
export default {
  name: 'myData',
  data() {
    return {
      openid: '',
      data1: [0, 0, 0, 0, 0, 0, 0],
      data2: [],
      data3: [0, 0, 0, 0, 0, 0, 0],
      option1: {
        xAxis: {},
        yAxis: {},
        label: {},
        tooltip: {},
        series: []
      },
      option2: {},
      option3: {
        xAxis: {},
        yAxis: {},
        label: {},
        tooltip: {},
        series: []
      },
      nickname: '',
      headImgUrl: '',
      haoyou: ''
    };
  },
  created() {
    this.openid = localStorage.getItem('openId');
    this.nickname = localStorage.getItem('nickname');
    this.headImgUrl = localStorage.getItem('headImgUrl');
    var that = this;
    $.ajax({
      url: 'https://yokapp.mynatapp.cc/user/myData',
      type: 'GET',
      async: false,
      data: { openid: that.openid },
      success: function(data) {
        that.data1 = data.weekData;
        that.data2 = data.readData;
        that.data3 = data.redirects;
      },
      error: function(xhr, textStatus) {
        console.log('myData失败' + textStatus);
      }
    });
  },
  mounted() {
    var d = new Date();
    var day = d.getDay();
    var weekday = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    if (day == 0) {
      weekday = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
    } else if (day == 1) {
      weekday = ['Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon'];
    } else if (day == 2) {
      weekday = ['Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue'];
    } else if (day == 3) {
      weekday = ['Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu'];
    } else if (day == 4) {
      weekday = ['Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu'];
    } else if (day == 5) {
      weekday = ['Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
    }

    this.option1 = {
      xAxis: {
        type: 'category', // 还有其他的type，可以去官网喵两眼哦
        data: weekday, // x轴数据
        // x轴名称样式
        nameTextStyle: {
          fontWeight: 500,
          fontSize: 15
        }
      },
      yAxis: {
        type: 'value',
        name: '访问人数', // y轴名称
        // y轴名称样式
        nameTextStyle: {
          fontWeight: 500,
          fontSize: 15
        }
      },
      tooltip: {
        trigger: 'axis' // axis   item   none三个值
      },
      series: [
        {
          name: '访问人数',
          data: this.data1,
          type: 'line'
        }
      ],
      title: {
        text: '一周访问人数报告', //大标题
        x: 'center' //标题位置   居中
      }
    };

    this.option3 = {
      xAxis: {
        type: 'category', // 还有其他的type，可以去官网喵两眼哦
        data: weekday, // x轴数据
        // x轴名称样式
        nameTextStyle: {
          fontWeight: 500,
          fontSize: 15
        }
      },
      yAxis: {
        type: 'value',
        name: '转发人数', // y轴名称
        // y轴名称样式
        nameTextStyle: {
          fontWeight: 500,
          fontSize: 15
        }
      },
      tooltip: {
        trigger: 'axis' // axis   item   none三个值
      },
      series: [
        {
          name: '转发人数',
          data: this.data3,
          type: 'line'
        }
      ],
      title: {
        text: '一周转发人数报告', //大标题
        x: 'center' //标题位置   居中
      }
    };

    var readData = [];
    var readType = [];
    if (this.data2.length < 1 || this.data2 == null) {
      readData.push({ value: 1, name: '暂无好友阅读' });
    } else {
      for (var i = 0; i < this.data2.length; i++) {
        readType.push(this.data2[i].type);
        readData.push({ value: this.data2[i].countNum, name: this.data2[i].type });
      }
    }

    this.option2 = {
      title: {
        text: '好友关注文章类型', //大标题
        x: 'center' //标题位置   居中
      },
      tooltip: {
        trigger: 'item', //数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
        formatter: '{a} <br/>{b} : {c} ({d}%)' //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）用于鼠标悬浮时对应的显示格式和内容
      },
      legend: {
        //图例组件。
        orient: 'vertical', //图例列表的布局朝向
        left: 'left',
        data: readType
      },
      series: [
        //系列列表。每个系列通过 type 决定自己的图表类型
        {
          name: '文章类型',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: readData,
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

    let myChart1 = echarts.init(document.getElementById('myChart1'));
    let myChart2 = echarts.init(document.getElementById('myChart2'));
    let myChart3 = echarts.init(document.getElementById('myChart3'));
    myChart1.setOption(this.option1);
    myChart3.setOption(this.option3);
    myChart2.setOption(this.option2);
  }
};
</script>

<style scoped>
.myChart1 {
  width: 400px;
  height: 250px;
  margin-top: 90px;
}
.myChart2 {
  width: 400px;
  height: 250px;
}
.data-box{
  margin-bottom: 50px;
}
</style>
